const path = require("path");  // node核心模块
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // node核心模块
const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",  // 指定要用到的模板
    filename: "index.html"  // 指定生成的文件名，只存在于内存中，目录中不显示
});
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin")  //压缩js

module.exports = {
    mode: 'development',  // 默认为生成模式为 production
    entry: path.join(__dirname, './src/index.js'),  // 入口文件
    output: {   // 输出文件
        filename: 'bundle.js',  // 输出文件名,bundle.js并没有显示的在根目录中，但在跟路由中/bundle.js可输出
        path: path.join(__dirname, './dist')
    },
    plugins: [
        htmlPlugin,
        new VueLoaderPlugin(),
        new UglifyjsWebpackPlugin()
    ],  // 插件
    module: {
        rules: [
            {
                test: /\.css$/,
                // loader: ExtractTextPlugin.extract,
                use: ["style-loader", "css-loader", "postcss-loader"],  //顺序不能换
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            // 当use只有一个loader时，可以直接使用字符串形式
            {
                test: /\.(jpg|jpeg|png|gif|bmp|webp|ttf|eot|svg|woff|woff2)$/,
                // use: "url-loader?limit=16384",  // 当图片大小小于16kb时，转为base64格式
                use: "url-loader?limit=16384&name=images/[hash:8].[name].[ext]", //保留原图片名hash只留8位
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/  // exclude排除内置包js，只转换自己写的高级js
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    }
};
// 处理高级js语法
// npm install babel-loader @babel/core @babel/runtime -D
// npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
